<template>
  <div class="qrcode cen">
    <back title="二维码分享"></back>

    <div class="main">
      <img src="http://wxtest.uaryd.com/static/img/code2.c5224ba.png">
      <div ref="hidden" class="hidden"></div>
      <div id="qrcode"></div>
    </div>
  </div>
</template>

<script>
  import Qrcode from 'qrcodejs2'

  export default {
    name: 'qrcode',
    data () {
      return{
        
      }
    },
    components:{
      
    },
    methods:{
      
    },
    mounted(){
      let width=this.$refs.hidden.offsetWidth,height=this.$refs.hidden.offsetHeight
      let qrcode = new Qrcode(document.getElementById("qrcode"), {
        width : width,
        height : height
      });
      qrcode.makeCode('http://www.baidu.com')
    }
  }
</script>

<style lang="less" scoped>
  .qrcode{
    .main{
      position: relative;
      img{
        width: 8.9rem;
      }
      #qrcode{
        position: absolute;
        left: 3.3rem;
        top: 1.6rem;
      }
      @w-h: 3.71rem;
      .hidden{
        width: @w-h;
        height: @w-h;
        position: absolute;
        z-index: -1;
      }
    }
  }
</style>